import React, { Component } from 'react';
import { Modal, Card, Row, Col, Icon } from 'antd';
import PropTypes from 'prop-types';
import styles from './DetailModal.less';

export default class DetailModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            imgSrc: ''
        };
    }


    handleImgPreview = (src) => {
        this.setState({
            visible: true,
            imgSrc: src
        });
    }
    handleCancel = () => {
        this.setState({
            visible: false
        });
    }
    render() {
        const { visible, info, handleCancel } = this.props;
        return (
            <Modal
                onCancel={handleCancel}
                width={1100}
                visible={visible}
                footer={null}
                title={'订单详情'}>
                    <div>
                        <div className={styles.cardWrapper}>
                            <Card type={'inner'} title={'业务信息'}>
                                <Row gutter={16}>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>订单编号：</span><span>{info.orderNumber || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>用户ID：</span><span>{info.userId || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>正常还款金额(元)：</span><span>{info.applicationMoney || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>申请时间：</span><span>{info.applicationTime || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>申请权限(天)：</span><span>{info.applicationDays || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>服务费：</span><span>{info.serviceMoney || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>借款状态：</span><span>{info.loanOption || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>审核员：</span><span>{info.checkPerson || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>申请金额：</span><span>{info.hasGiveMoney || ''}</span></Col>
                                </Row>
                            </Card>
                        </div>

                        <div className={styles.cardWrapper}>
                            <Card type={'inner'} title={'个人信息'}>
                                <Row gutter={24}>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>客户姓名：</span><span>{info.customerName || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>手机号：</span><span>{info.iphoneNumber || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>身份证号：</span><span>{info.idCard || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>可借金额(元)：</span><span>{info.hasGiveMoney || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={16}><span className={styles.title}>家庭住址：</span><span>{info.address || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>渠道：</span><span>{info.source || ''}</span></Col>

                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>种类：</span><span>{info.bankCardType || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>开户银行：</span><span>{info.bank || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>卡号：</span><span>{info.cardNumber || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>预留手机号：</span><span>{info.bankIphoneNumber || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>添加时间：</span><span>{info.addTime || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>同盾分数：</span><span>{info.score}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>风险区间：</span><span>{info.riskLevel || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>芝麻分：</span><span>{info.zhimafen || ''}</span></Col>
                                    <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>指迷分：</span><span>{info.zmScore || ''}</span></Col>
                                </Row>
                            </Card>
                        </div>

                        <div className={styles.cardWrapper}>
                            <Card type={'inner'} title={'客户资料'}>
                                <Row gutter={24}>
                                    <Col className={styles.col} span={8}>
                                        <div className={styles.idCardImg} onClick={() => this.handleImgPreview(info.idCardFront)}><img className={styles.userPic} src={info.idCardFront} /></div>
                                        <div className={styles.picTitle}>身份证正面</div>
                                    </Col>
                                    <Col className={styles.col} span={8}>
                                        <div className={styles.idCardImg} onClick={() => this.handleImgPreview(info.idCardBack)}><img className={styles.userPic} src={info.idCardBack} /></div>
                                        <div className={styles.picTitle}>身份证反面</div>
                                    </Col>
                                    <Col className={styles.col} span={8}>
                                        <div className={styles.idCardImg} onClick={() => this.handleImgPreview(info.frontPic)}><img className={styles.userPic} src={info.frontPic} /></div>
                                        <div className={styles.picTitle}>大头照</div>
                                    </Col>
                                </Row>
                            </Card>
                        </div>

                <div className={styles.cardWrapper}>
                    <Card type={'inner'} title={'同意协议'}>
                        <Row gutter={16}>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}></span><span><Icon style={{color: '#00be14',marginRight: '3px'}} type="check" /><a style={{textDecoration: 'none'}} target="_blank" href="/h5/register/protocol.html">用户协议</a></span></Col>
                            <Col className={styles.col} lg={12} xl={8}><span className={styles.title}></span><span><Icon style={{color: '#00be14',marginRight: '3px'}} type="check" /><a style={{textDecoration: 'none'}} target="_blank" href="/h5/register/protocol2.html">用款及支付协议</a></span></Col>
                        </Row>
                    </Card>
                </div>
                
                    </div>
                <Modal
                    onCancel={this.handleCancel}
                    width={600}
                    visible={this.state.visible}
                    footer={null}
                    mask={false}
                    title={'查看图片'}>
                    <div className={styles.imageWrapper}>
                        <img width={'100%'} alt={'idCard'} src={this.state.imgSrc}/>
                    </div>
                </Modal>
            </Modal>
        );
    }
}

DetailModal.propTypes = {
    visible: PropTypes.bool,
    handleCancel: PropTypes.func,
    info: PropTypes.object

}
DetailModal.defaultProps = {
    visible: false,
    handleCancel() {},
    info: {}
};
